<template>
	<Layout class="layout-container mask-all">
		<Spin fix v-if="loading" size="large"></Spin>
		<Content>
			<Layout class="layout-container">
				<Content class="padding-all">
					<Tree ref="tree" :data="data" :render="renderContent" class="perms-tree-render"></Tree>
				</Content>
			</Layout>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Spin, Tree, Button } from 'view-design';
import { each, confirm, createWindow, extend, perms, htmlToText } from 'config/utils';

//权限树接口
const URI_TREE = "/security/api/permission/tree";
//删除
const URI_REMOVE = "/security/api/permission/remove";
//添加
const ROUTER_ADD = "sys/perm/add";
//修改
const ROUTER_EDIT = "sys/perm/edit";

export default {
	name: "SysPermManage",
	data() {
		return {
			loading: true,
			perms: {
				add:false,
				edit:false,
				remove:false
			},
			data: [
				{
					id: "root",
                    title: this.$t('sys.perm.manager'),
                    expand: true,
                    children: []
                }
			]
		};
	},
	methods: {
		
		renderRoot(h, { root, node, data }) {
			var buttons = [];
			if(this.perms.add) {
				buttons.push(h(Button, {
                    props: {
                        icon: 'ios-add'
                    },
                    style: {
                        marginRight: '3px'
                    },
                    on: {
                        click: () => {
                        	this.add(data);
                        }
                    }
                }));
			}
			return h('span', {
				style: {
					display: 'inline-block',
                    width: '100%',
                    "line-height": "32px"
				}
			}, [
                h('span', data.title),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right'
                    }
                }, buttons)
            ]);
		},
		renderChildren(h, { root, node, data }) {
			var buttons = [];
            if(this.perms.add) {
            	buttons.push(h(Button, {
	                props: {
	                    icon: 'ios-add'
	                },
	                style: {
	                    marginRight: '3px'
	                },
	                on: {
	                    click: () => {
	                    	this.add(data);
	                    }
	                }
	            }));
            }
            if(this.perms.edit) {
            	buttons.push(h(Button, {
                    props: {
                        icon: 'ios-create-outline'
                    },
                    style: {
                        marginRight: '3px'
                    },
                    on: {
                        click: () => {
                        	this.edit(data);
                        }
                    }
                }));
            }
            if(this.perms.remove && (!data.children || data.children.length == 0)) {
            	buttons.push( h(Button, {
                    props: {
                        icon: 'ios-remove'
                    },
                    style: {
                        marginRight: '3px'
                    },
                    on: {
                        click: () => {
                        	this.remove(root, node);
                        }
                    }
                }));
            }
			return h('span', {
				style: {
					display: 'inline-block',
                    width: '100%',
                    "line-height": "32px"
				}
			}, [
                h('span', data.title),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right'
                    }
                }, buttons)
            ]);
		},
		renderContent(h, { root, node, data }) {
			if(data.id == 'root') {
				return this.renderRoot(h, { root, node, data });
			} else {
				return this.renderChildren(h, { root, node, data });
			}
		},
		build(children, perms) {
			var me = this;
			each(perms, function() {
				var item = me.createTreeItem(this);
				if(this.children && this.children.length) {
					me.build(item.children, this.children);
				}
				children.push(item);
			});
		},
		add(data) {
			createWindow({
				title: this.$t("sys.perm.title.add"),
				router: ROUTER_ADD,
				params: data,
				callback: (perm) => {
					data.children.push(this.createTreeItem(perm));
					this.$set(data, 'children', data.children);
					this.$set(data, 'expand', true);
				}
			});
		},
		edit(data) {
			createWindow({
				title: this.$t("sys.perm.title.edit"),
				router: ROUTER_EDIT,
				params: data,
				callback: (perm) => {
					data.title = htmlToText(perm.name) + '(' + perm.id + ')';
					extend(data.perm, perm);
				}
			});
		},
		remove(root, node) {
			var me = this;
			confirm("info.confirm.remove", function(isOk) {
				if(isOk) {
					me.$http.post(URI_REMOVE, {
						id: node.node.id
					}).then((response) => {
						var res = response.data;
						if(res.success) {
							//删除
							const parentKey = root.find(el => el === node).parent;
			                const parent = root.find(el => el.nodeKey === parentKey).node;
			                const index = parent.children.indexOf(node.node);
			                parent.children.splice(index, 1);
						}
						this.remove();
					});
					return false;
				}
			}, true);
		},
		createTreeItem(perm) {
			return {
				id: perm.id,
				title: htmlToText(perm.name) + '(' + perm.id + ')',
				perm,
				children: []
			}
		}
	},
	mounted() {
		var params = {
			add:"sys:perm:manager:add",
			edit:"sys:perm:manager:edit",
			remove:"sys:perm:manager:remove"
		};
		perms(params, (isOk, data) => {
			if(isOk) {
				this.perms = data;
			}
			//初始化权限树
			this.$http.post(URI_TREE).then((response) => {
				var res = response.data;
				if(res.success) {
					this.build(this.data[0].children, res.data);
				}
				this.loading = false;
			});
		});
	},
	components: {
		Layout,
		Content,
		Spin,
		Tree
	}
}
</script>
<style type="text/css">
.perms-tree-render {
	width: 500px;
}
.perms-tree-render .ivu-tree-title{
    width: 100%;
}
.perms-tree-render .ivu-tree-arrow {
	line-height: 32px;
}
</style>